<template>
  <view class="homeLayout pageBg">
    <custom-tab-bar title="推荐"></custom-tab-bar>
    <view class="banner">
      <swiper indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay>
        <swiper-item v-for="item in bannenList" :key="item._id">
          <image :src="item.picurl" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="notice">
      <view class="left">
        <uni-icons type="sound-filled" size="20"></uni-icons>
        <text class="text">公告</text>
      </view>
      <view class="center">
        <swiper vertical autoplay interval="3000" duration="300" circular>
          <swiper-item v-for="item in noticeList" :key="item._id">
            <navigator url="/pages/notice/detail">{{item.title}}</navigator>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
        <uni-icons type="right" size="16" color="#333"></uni-icons>
      </view>
    </view>
    <view class="select">
      <common-title>
        <template #name>每日推荐</template>
        <template #custom>
          <view class="date">
            <uni-icons type="calendar" size="18"></uni-icons>
            <view class="text">
              <uni-dateformat :date="Date.now()" format="dd号"></uni-dateformat>
            </view>
          </view>
        </template>
      </common-title>
      <view class="content">
        <scroll-view scroll-x>
          <navigator url="/pages/preview/preview" class="box" v-for="item in randomList" :key="item._id">
            <image :src="item.smallPicurl" mode="aspectFill"></image>
          </navigator>
        </scroll-view>
      </view>
    </view>
    <view class="theme">
      <common-title>
        <template #name>专题精选</template>
        <template #custom>
          <navigator class="more" url="">More+</navigator>
        </template>
      </common-title>
      <view class="content">
        <theme-item v-for="item in 8"></theme-item>
        <theme-item :isMore="true"></theme-item>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import {
    apiGet
  } from '@/api/apis.js'
  //banner图
  const bannenList = ref([])
  const getBanner = async () => {
    let res = await apiGet();
    if (res.data.errCode === 0) {
      bannenList.value = res.data.data
    }
    console.log(res);
  }
  //每天壁纸
  const randomList = ref([])
  const getDayRandom = async () => {
    let res = await uni.request({
      url: "https://tea.qingnian8.com/api/bizhi/randomWall",
      header: {
        "accrss-key": "901403"
      },
      data: {
        select: true
      }
    })
    if (res.data.errCode === 0) {
      randomList.value = res.data.data
    }
  }
  //公告
  const noticeList = ref([])
  const getNotice = async () => {
    let res = await uni.request({
      url: "https://tea.qingnian8.com/api/bizhi/wallNewsList",
      header: {
        "accrss-key": "901403"
      },
      data: {
        select: true
      }
    })
    if (res.data.errCode === 0) {
      noticeList.value = res.data.data
    }
  }
  getBanner();
  getDayRandom();
  getNotice();
</script>

<style lang="scss" scoped>
  .homeLayout {
    .banner {
      width: 750rpx;
      padding: 30rpx 0;

      swiper {
        width: 750rpx;
        height: 340;

        &-item {
          width: 100%;
          height: 100%;
          padding: 0 30rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 15rpx;
          }
        }
      }
    }

    .notice {
      width: 690rpx;
      height: 80rpx;
      display: flex;
      margin: 0 30rpx;
      text-align: center;
      background-color: #f9f9f9;
      border-radius: 40rpx;
      line-height: 80rpx;

      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }


      .left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140rpx;

        .text {
          color: $brand-theme-color;
          font-weight: 400;
          font-size: 28rpx;
        }

      }

      .center {
        flex: 1;

        swiper {
          height: 100%;

          &-item {
            height: 100%;
            font-size: 30rpx;
            color: #666;
            /*多余文字不换行且隐藏*/
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

          }
        }

      }

      .right {
        width: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }

    .select {
      padding-top: 50rpx;

      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }

      .date {
        color: $brand-theme-color;
        display: flex;
        align-items: center;

        .text {
          margin-left: 5rpx;
        }
      }

      .content {
        width: 720rpx;
        margin-left: 30rpx;
        margin-top: 30rpx;

        scroll-view {
          white-space: nowrap;

          .box {
            width: 200rpx;
            height: 400rpx;
            display: inline-block;
            margin-right: 15rpx;

            image {
              border-radius: 12rpx;
              width: 100%;
              height: 100%;
            }
          }

          .box:last-child {
            margin-right: 30rpx;
          }
        }


      }
    }

    .theme {
      padding: 50rpx 0;

      .more {
        font-size: 32rpx;
        color: #888
      }

      .content {
        margin-top: 30rpx;
        padding: 0 30rpx;
        /*网格式分布*/
        display: grid;
        gap: 15rpx;
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
</style>